<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/doc.css">
</head>

<body>
    <div id="app" class="w">
        <header>
            <div class="logo"></div>
        </header>
        <div class="container ">
            <div class="left">
                <div class="side-nav">
                    <div class="strong">
                        <a href="#update">更新日志</a>
                    </div>
                    <div class="strong">
                        <a href="#start">开始使用</a>
                    </div>
                    <div class="strong msg">
                        <span>模块</span>
                    </div>
                    <div class="normal">
                        <a href="#color">Color 颜色</a>
                    </div>
                    <div class="normal">
                        <a href="#font">Font 字体图标</a>
                    </div>
                    <div class="normal">
                        <a href="#button">Button 按钮</a>
                    </div>
                    <div class="normal">
                        <a href="#link">Link 文字链接</a>
                    </div>
                    <div class="normal">
                        <a href="#radio">radio 单选框</a>
                    </div>
                    <div class="normal">
                        <a href="#checkbox">checkbox 复选框</a>
                    </div>
                    <div class="normal">
                        <a href="#input">input 输入框</a>
                    </div>
                    <div class="normal">
                        <a href="#select">select 下拉选</a>
                    </div>
                    <div class="normal">
                        <a href="#message">message 消息提示</a>
                    </div>
                </div>
            </div>
            <div class="right table-list">
                <div class="table" style="width: 100%;">
                    <!-- update 更新日志 -->
                    <div class="module update">
                        <h2>更新日志</h2>
                        <div class="demonstration">
                            <div class="item">
                                <h3 class="title">
                                    <span>1.0.0</span>
                                    <span>2021-06-15</span>
                                </h3>
                                <div class="content">
                                    <h3>发布说明</h3>
                                    <div class="item-child">
                                        <p>color 颜色</p>
                                        <span>发布 color 颜色模块</span>
                                    </div>
                                    <div class="item-child">
                                        <p>Font 字体图标</p>
                                        <span>发布 Font 字体图标模块</span>
                                    </div>
                                    <div class="item-child">
                                        <p>Button 按钮</p>
                                        <span>发布 Button 按钮模块</span>
                                    </div>
                                    <div class="item-child">
                                        <p>Link 文字</p>
                                        <span>发布 Link 文字模块</span>
                                    </div>
                                    <div class="item-child">
                                        <p>radio 单选框</p>
                                        <span>发布 radio 单选框模块</span>
                                    </div>
                                    <div class="item-child">
                                        <p>checkbox 复选框</p>
                                        <span>发布 checkbox 复选框模块</span>
                                    </div>
                                    <div class="item-child">
                                        <p>input 输入框</p>
                                        <span>发布 input 输入框模块</span>
                                    </div>
                                    <div class="item-child">
                                        <p>select 下拉选</p>
                                        <span>发布 select 下拉选模块</span>
                                    </div>
                                    <div class="item-child">
                                        <p>message 消息提示</p>
                                        <span>发布 message 消息提示模块</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- start 开始使用 -->
                    <div class="module start">
                        <h2>开始使用</h2>
                        <div class="demonstration">
                            <p class="description">
                                git仓库地址
                                <div class="code">
                                    <pre><span>https://gitee.com/chrisnan/rieter-jsdist.git</span></pre>
                                </div>
                                引入组件库
                                <div class="code">
                                    <pre><span>&lt;!-- 引入组件库 --&gt;
&lt;script src="项目路径/rieter-jsdist/js/rieter.js"&gt;&lt;/script&gt;</span></pre>
                                </div>
                            </p>
                        </div>
                    </div>
                    <!-- Color颜色 -->
                    <div class="module color">
                        <h2>Color 颜色</h2>
                        <p class="description">
                            为了避免视觉传达差异，使用一些特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
                        </p>
                        <div class="demonstration">
                            <div class="item">
                                <div class="ld-blue">蓝色</div>
                                <p>#409EFF</p>
                            </div>
                            <div class="item">
                                <div class="ld-red">红色</div>
                                <p>#F56C6C</p>
                            </div>
                            <div class="item">
                                <div class="ld-orange">橙色</div>
                                <p>#E6A23C</p>
                            </div>
                            <div class="item">
                                <div class="ld-green">绿色</div>
                                <p>#909399</p>
                            </div>
                            <div class="item">
                                <div class="ld-gray">灰色</div>
                                <p>#67C23A</p>
                            </div>
                        </div>
                        <div class="code">
                            <pre><span><<span>div</span> <span>class="<span class="code-value">ld-blue</span>"></span><span>蓝色</span><<span>/div</span>></span><br/><span><<span>div</span> <span>class="<span class="code-value">ld-red</span>"></span><span>红色</span><<span>/div</span>></span><br/><span><<span>div</span> <span>class="<span class="code-value">ld-orange</span>"></span><span>橙色</span><<span>/div</span>></span><br/><span><<span>div</span> <span>class="<span class="code-value">ld-green</span>"></span><span>绿色</span><<span>/div</span>></span><br/><span><<span>div</span> <span>class="<span class="code-value">ld-gray</span>"></span><span>灰色</span><<span>/div</span>></span></pre>
                        </div>
                        <div class="demonstration">
                            <div class="item2">
                                <div class="ld-blue-bg"></div>
                                <p class="ld-blue">蓝色背景</p>
                            </div>
                            <div class="item2">
                                <div class="ld-red-bg"></div>
                                <p class="ld-red">红色背景</p>
                            </div>
                            <div class="item2">
                                <div class="ld-orange-bg"></div>
                                <p class="ld-orange">橙色背景</p>
                            </div>
                            <div class="item2">
                                <div class="ld-green-bg"></div>
                                <p class="ld-green">绿色背景</p>
                            </div>
                            <div class="item2">
                                <div class="ld-gray-bg"></div>
                                <p class="ld-gray">灰色背景</p>
                            </div>
                        </div>
                        <div class="code">
                            <pre><span><<span>div</span> <span>class="<span class="code-value">ld-blue-bg</span>"></span><span>蓝色</span><<span>/div</span>></span><br/><span><<span>div</span> <span>class="<span class="code-value">ld-red-bg</span>"></span><span>红色</span><<span>/div</span>></span><br/><span><<span>div</span> <span>class="<span class="code-value">ld-orange-bg</span>"></span><span>橙色</span><<span>/div</span>></span><br/><span><<span>div</span> <span>class="<span class="code-value">ld-green-bg</span>"></span><span>绿色</span><<span>/div</span>></span><br/><span><<span>div</span> <span>class="<span class="code-value">ld-gray-bg</span>"></span><span>灰色</span><<span>/div</span>></span></pre>
                        </div>
                    </div>
                    <!-- Font字体 -->
                    <div class="module font">
                        <h2>Font 字体图标</h2>
                        <p class="description">
                            提供了一套常用的图标集合。来源：iconfont 阿里巴巴国际站官方图标库
                        </p>
                        <p class="description">
                            直接通过设置类名为 iconfont iconName 来使用即可。例如：
                        </p>
                        <div class="code">
                            <pre><span><<span>i</span> class="iconfont icon-print"><<span>i></span></span></pre>
                        </div>

                        <div class="project-iconlist"></div>
                    </div>
                    <!-- Button按钮 -->
                    <div class="module button">
                        <h2>Button 按钮</h2>
                        <p class="description">
                            常用的操作按钮。
                        </p>
                        <div class="demonstration">
                            <button class="ld-default">按钮</button>
                            <button class="ld-primary">按钮</button>
                            <button class="ld-success">按钮</button>
                            <button class="ld-info">按钮</button>
                            <button class="ld-warning">按钮</button>
                            <button class="ld-danger">按钮</button>
                            <br>
                            <br>
                            <button class="ld-default" plain>按钮</button>
                            <button class="ld-primary" plain>按钮</button>
                            <button class="ld-success" plain>按钮</button>
                            <button class="ld-info" plain>按钮</button>
                            <button class="ld-warning" plain>按钮</button>
                            <button class="ld-danger" plain>按钮</button>
                            <br>
                            <br>
                            <button class="ld-default" round>按钮</button>
                            <button class="ld-primary" round>按钮</button>
                            <button class="ld-success" round>按钮</button>
                            <button class="ld-info" round>按钮</button>
                            <button class="ld-warning" round>按钮</button>
                            <button class="ld-danger" round>按钮</button>
                            <br>
                            <br>
                            <button class="ld-default iconfont icon-seleted" circle></button>
                            <button class="ld-primary iconfont icon-reeor" circle></button>
                            <button class="ld-success iconfont icon-prompt" circle></button>
                            <button class="ld-info iconfont icon-cart-Empty-fill" circle></button>
                            <button class="ld-warning iconfont icon-aviation" circle></button>
                            <button class="ld-danger iconfont icon-ashbin" circle></button>
                            <br>
                            <br>
                            <button class="ld-default" disabled>按钮</button>
                            <button class="ld-primary" disabled>按钮</button>
                            <button class="ld-success" disabled>按钮</button>
                            <button class="ld-info" disabled>按钮</button>
                            <button class="ld-warning" disabled>按钮</button>
                            <button class="ld-danger" disabled>按钮</button>
                        </div>
                        <p class="description">
                            使用<span class="code-tap">type</span>、<span class="code-tap">plain</span>、<span
                                class="code-tap">round</span>和<span class="code-tap">circle</span>属性来定义 Button 的样式。
                        </p>
                        <div class="code">
                            <pre><span>&ltbutton class="ld-default"&gt按钮&lt/button&gt
&ltbutton class="ld-primary"&gt按钮&lt/button&gt
&ltbutton class="ld-success"&gt按钮&lt/button&gt
&ltbutton class="ld-info"&gt按钮&lt/button&gt
&ltbutton class="ld-warning"&gt按钮&lt/button&gt
&ltbutton class="ld-danger"&gt按钮&lt/button&gt

&ltbutton class="ld-default" plain&gt按钮&lt/button&gt
&ltbutton class="ld-primary" plain&gt按钮&lt/button&gt
&ltbutton class="ld-success" plain&gt按钮&lt/button&gt
&ltbutton class="ld-info" plain&gt按钮&lt/button&gt
&ltbutton class="ld-warning" plain&gt按钮&lt/button&gt
&ltbutton class="ld-danger" plain&gt按钮&lt/button&gt

&ltbutton class="ld-default" round&gt按钮&lt/button&gt
&ltbutton class="ld-primary" round&gt按钮&lt/button&gt
&ltbutton class="ld-success" round&gt按钮&lt/button&gt
&ltbutton class="ld-info" round&gt按钮&lt/button&gt
&ltbutton class="ld-warning" round&gt按钮&lt/button&gt
&ltbutton class="ld-danger" round&gt按钮&lt/button&gt

&ltbutton class="ld-default iconfont icon-seleted" circle&gt&lt/button&gt
&ltbutton class="ld-primary iconfont icon-reeor" circle&gt&lt/button&gt
&ltbutton class="ld-success iconfont icon-prompt" circle&gt&lt/button&gt
&ltbutton class="ld-info iconfont icon-cart-Empty-fill" circle&gt&lt/button&gt
&ltbutton class="ld-warning iconfont icon-aviation" circle&gt&lt/button&gt
&ltbutton class="ld-danger iconfont icon-ashbin" circle&gt&lt/button&gt

&ltbutton class="ld-default" disabled&gt&lt/button&gt
&ltbutton class="ld-primary" disabled&gt&lt/button&gt
&ltbutton class="ld-success" disabled&gt&lt/button&gt
&ltbutton class="ld-info" disabled&gt&lt/button&gt
&ltbutton class="ld-warning" disabled&gt&lt/button&gt
&ltbutton class="ld-danger" disabled&gt&lt/button&gt</span></pre>
                        </div>
                        <div class="project-iconlist"></div>
                        <h3>按钮的大小</h3>
                        <div class="description">
                            <span>额外的尺寸：<span class="code-tap">medium</span> 、<span class="code-tap">small</span>、<span
                                    class="code-tap">mini</span>，通过设置<span class="code-tap">size</span>属性来配置它们。</span>
                        </div>
                        <button class="ld-primary">默认按钮</button>
                        <button class="ld-primary" size="medium">中等按钮</button>
                        <button class="ld-primary" size="small">小型按钮</button>
                        <button class="ld-primary" size="mini">超小按钮</button>
                        <div class="code">
                            <pre><span>&lt;button class="ld-primary"&gt;默认按钮&lt;/button&gt;
&lt;button class="ld-primary" size="medium"&gt;中等按钮&lt;/button&gt;
&lt;button class="ld-primary" size="small"&gt;小型按钮&lt;/button&gt;
&lt;button class="ld-primary" size="mini"&gt;超小按钮&lt;/button&gt;</span></pre>
                        </div>
                    </div>
                    <!-- Link 文字 -->
                    <div class="module link">
                        <h2>Link 文字</h2>
                        <p class="description">
                            文字超链接
                        </p>
                        <div class="demonstration">
                            <h3>基础用法</h3>
                            <a href="javascript:;" class="ld-link-default">默认链接</a>
                            <a href="javascript:;" class="ld-link-main">主要链接</a>
                            <a href="javascript:;" class="ld-link-success">成功链接</a>
                            <a href="javascript:;" class="ld-link-warning">警告链接</a>
                            <a href="javascript:;" class="ld-link-danger">危险链接</a>
                            <br>
                            <div class="code">
                                <pre><span>&lta href="javascript:;" class="ld-link-default"&gt默认链接&lt/a&gt
&lta href="javascript:;" class="ld-link-main"&gt主要链接&lt/a&gt
&lta href="javascript:;" class="ld-link-success"&gt成功链接&lt/a&gt
&lta href="javascript:;" class="ld-link-warning"&gt警告链接&lt/a&gt
&lta href="javascript:;" class="ld-link-danger"&gt危险链接&lt/a&gt</span></pre>
                            </div>
                            <br>
                            <h3>无下划线</h3>
                            <a href="javascript:;" class="ld-link-default" underline="false">默认链接</a>
                            <a href="javascript:;" class="ld-link-main" underline="false">主要链接</a>
                            <a href="javascript:;" class="ld-link-success" underline="false">成功链接</a>
                            <a href="javascript:;" class="ld-link-warning" underline="false">警告链接</a>
                            <a href="javascript:;" class="ld-link-danger" underline="false">危险链接</a>
                            <br>
                            <div class="code">
                                <pre><span>&lta href="javascript:;" class="ld-link-default" underline="false"&gt默认链接&lt/a&gt
&lta href="javascript:;" class="ld-link-main" underline="false"&gt主要链接&lt/a&gt
&lta href="javascript:;" class="ld-link-success" underline="false"&gt成功链接&lt/a&gt
&lta href="javascript:;" class="ld-link-warning" underline="false"&gt警告链接&lt/a&gt
&lta href="javascript:;" class="ld-link-danger" underline="false"&gt危险链接&lt/a&gt</span></pre>
                            </div>
                            <br>
                            <h3>禁用状态</h3>
                            <a href="javascript:;" class="ld-link-default" disabled>默认链接</a>
                            <a href="javascript:;" class="ld-link-main" disabled>主要链接</a>
                            <a href="javascript:;" class="ld-link-success" disabled>成功链接</a>
                            <a href="javascript:;" class="ld-link-warning" disabled>警告链接</a>
                            <a href="javascript:;" class="ld-link-danger" disabled>危险链接</a>
                            <br>
                            <div class="code">
                                <pre><span>&lta href="javascript:;" class="ld-link-default" disabled&gt默认链接&lt/a&gt
&lta href="javascript:;" class="ld-link-main" disabled&gt主要链接&lt/a&gt
&lta href="javascript:;" class="ld-link-success" disabled&gt成功链接&lt/a&gt
&lta href="javascript:;" class="ld-link-warning" disabled&gt警告链接&lt/a&gt
&lta href="javascript:;" class="ld-link-danger" disabled&gt危险链接&lt/a&gt</span></pre>
                            </div>
                            <br>
                            <h3>图标</h3>
                            <a href="javascript:;" class="ld-link-main">下载<i class="iconfont icon-falling"></i></a>
                            <a href="javascript:;" class="ld-link-danger"><i
                                    class="iconfont icon-warning"></i>不安全的链接</a>
                            <br>
                            <div class="code">
                                <pre><span>&lta href="javascript:;" class="ld-link-main"&gt下载&lti class="iconfont icon-falling"&gt&lt/i&gt&lt/a&gt
&lta href="javascript:;" class="ld-link-danger"&gt&lti class="iconfont icon-warning"&gt&lt/i&gt不安全的链接&lt/a&gt</span></pre>
                            </div>
                            <br>
                        </div>
                    </div>
                    <!-- radio 单选框 -->
                    <div class="module radio">
                        <h2>radio 单选框</h2>
                        <p class="description">
                            在一组备选项中进行单选
                        </p>
                        <div class="demonstration">
                            <h3>基础用法</h3>
                            <p class="description">为每组单选框添加相同的<span class="code-tap">name</span>属性及<span
                                    class="code-tap">ld-radio</span>类名，<span
                                    class="code-tap">checked</span>属性为默认选中项，<span
                                    class="code-tap">label</span>属性的值为显示文字。</p>
                            <span>性别：</span>
                            <span class="ld-radio-group sex" group="sex">
                                <input class="ld-radio" type="radio" name="sex" value="1" label="男" checked>
                                <input class="ld-radio" type="radio" name="sex" value="2" label="女">
                            </span>
                            <br>
                            <button class="ld-primary getSex">获取性别</button>
                            <div class="code">
                                <pre><span>&lt;span class="ld-radio-group sex" group="sex"&gt;
    &lt;input class="ld-radio" type="radio" name="sex" value="1" label="男" checked&gt;
    &lt;input class="ld-radio" type="radio" name="sex" value="2" label="女"&gt;
&lt;/span&gt;
&lt;br&gt;
&lt;button&gt; class="ld-primary getSex"&gt;获取性别&lt;/button&gt;</span></pre>
                            </div>
                            <div class="code">
                                <pre><span>$(".module.radio .getSex").click(function () {
    ldmessage.success("性别的值为：" + $(".ld-radio-group.sex").find("input:checked").val())
})</span></pre>
                            </div>
                            <h3>只读</h3>
                            <p class="description"><span class="code-tap">disabled</span>为只读选项。</p>
                            <input class="ld-radio" type="radio" name="options" value="A" label="A" disabled>
                            <input class="ld-radio" type="radio" name="options" value="B" label="B" disabled>
                            <input class="ld-radio" type="radio" name="options" value="C" label="C" disabled checked>
                            <input class="ld-radio" type="radio" name="options" value="D" label="D" disabled>
                            <div class="code">
                                <pre><span>&lt;input class="ld-radio" type="radio" name="options" value="A" label="A" disabled&gt;
&lt;input class="ld-radio" type="radio" name="options" value="B" label="B" disabled&gt;
&lt;input class="ld-radio" type="radio" name="options" value="C" label="C" disabled checked&gt;
&lt;input class="ld-radio" type="radio" name="options" value="D" label="D" disabled&gt;</span></pre>
                            </div>
                        </div>

                    </div>
                    <!-- checkbox 复选框 -->
                    <div class="module checkbox">
                        <h2>checkbox 复选框</h2>
                        <p class="description">
                            一组备选项中进行多选
                        </p>
                        <div class="demonstration">
                            <h3>基础用法</h3>
                            <p class="description">单独使用可以表示两种状态之间的切换，须加上 <span
                                    class="code-tap">ld-checkbox</span>这样的一个类，<span
                                    class="code-tap">label</span>属性的值为显示文字。</p>
                            <input class="ld-checkbox" type="checkbox" label="选项一" value="1">
                            <input class="ld-checkbox" type="checkbox" label="选项二" value="2">
                            <div class="code">
                                <pre><span>&lt;input class="ld-checkbox" type="checkbox" label="选项一" value="1"&gt;
&lt;input class="ld-checkbox" type="checkbox" label="选项二" value="2"&gt;</span></pre>
                            </div>
                            <h3>只读和选中</h3>
                            <p class="description">只读添加<span class="code-tap">disabled</span>属性，选中添加<span
                                    class="code-tap">checked</span>属性。</p>
                            <input class="ld-checkbox" disabled type="checkbox" label="选项一" value="1">
                            <input class="ld-checkbox" checked disabled type="checkbox" label="选项二" value="2">
                            <div class="code">
                                <pre><span>&lt;input class="ld-checkbox" type="checkbox" disabled label="选项一" value="1"&gt;
&lt;input class="ld-checkbox" type="checkbox" checked disabled label="选项二" value="2"&gt;</span></pre>
                            </div>
                            <h3>全选</h3>
                            <p class="description">为全选框添加一个<span
                                    class="code-tap">ld-checkbox-checkAll</span>的类，为子选框的父级元素添加一个<span
                                    class="code-tap">ld-check-group</span>的类，并有<span
                                    class="code-tap">prop</span>属性指向全选框的<span class="code-tap">id</span>值。</p>
                            <input class="ld-checkbox-checkAll" type="checkbox" label="全选" id="check">
                            <div class="ld-check-group" prop="check">
                                <input class="ld-checkbox" type="checkbox" label="选项一">
                                <input class="ld-checkbox" type="checkbox" label="选项二">
                                <input class="ld-checkbox" type="checkbox" label="选项三">
                                <input class="ld-checkbox" type="checkbox" label="选项四">
                            </div>
                            <div class="code">
                                <pre><span>&lt;input class="ld-checkbox-checkAll" type="checkbox" label="全选" id="check"&gt;
&lt;div&gt; class="ld-check-group" prop="check"&gt;
    &lt;input class="ld-checkbox" type="checkbox" label="选项一" value="1"&gt;
    &lt;input class="ld-checkbox" type="checkbox" label="选项二" value="2"&gt;
    &lt;input class="ld-checkbox" type="checkbox" label="选项三" value="3"&gt;
    &lt;input class="ld-checkbox" type="checkbox" label="选项四" value="4"&gt;
&lt;/div&gt;</span></pre>
                            </div>
                        </div>

                    </div>
                    <!-- input 输入框 -->
                    <div class="module input">
                        <h2>input 输入框</h2>
                        <p class="description">
                            通过键盘输入字符
                        </p>
                        <div class="demonstration">
                            <h3>基础用法</h3>
                            <p class="description">为<span class="code-tap">input</span>标签指定一个<span
                                    class="code-tap">ld-input</span>的类名，<span class="code-tap">type</span>设置为 <span
                                    class="code-tap">text</span>。</p>
                            <div class="demonstration">
                                <input class="ld-input" type="text" placeholder="请在此输入">
                            </div>
                            <div class="code">
                                <pre><span>&lt;input class="ld-input" type="text" placeholder="请在此输入"&gt;</span></pre>
                            </div>
                            <h3>只读</h3>
                            <input class="ld-input" type="text" placeholder="请在此输入" readonly>
                            <div class="code">
                                <pre><span>&lt;input class="ld-input" type="text" placeholder="请在此输入" readonly&gt;</span></pre>
                            </div>
                            <h3>可删除</h3>
                            <p class="description">设置<span class="code-tap">clearable</span>属性，可在<span
                                    class="code-tap">input</span>输入框有值的情况下直接点击图标删除，删除的回调可以设置<span
                                    class="code-tap">clearLdInput</span>函数。</p>
                            <input class="ld-input" type="text" placeholder="请在此输入" clearable>
                            <div class="code">
                                <pre><span>&lt;input class="ld-input" type="text" placeholder="请在此输入" clearable&gt;
&lt;script&gt;
    function clearLdInput() {
        ldmessage.error("我点击了删除")
    }
&lt;/script&gt;
                                </span></pre>
                            </div>
                            <h3>其他参数</h3>
                            <p class="description">设置<span class="code-tap">width</span>、<span
                                    class="code-tap">height</span>可以调整文本框的大小，注意：默认宽度为180px，高度为40px。</p>
                            <p class="description">设置<span class="code-tap">type</span>的值为<span
                                    class="code-tap">password</span>为密码框。</p>
                            <p class="description">设置<span class="code-tap">type</span>的值为<span
                                    class="code-tap">textarea</span>为大文本框。</p>
                            <div class="input-demo-div">
                                <input class="ld-input" type="text" placeholder="请在此输入" width="400px" height="30px">
                            </div>
                            <div class="input-demo-div">
                                <input class="ld-input" type="password" placeholder="请在此输入" width="400px">
                            </div>
                            <div class="input-demo-div">
                                <input class="ld-input" type="textarea" placeholder="请在此输入" width="100%">
                            </div>
                            <div class="code">
                                <pre><span>&lt;div&gt; class="input-demo-div"&gt;
    &lt;input class="ld-input" type="text" placeholder="请在此输入" width="400px" height="30px"&gt;
&lt;/div&gt;
&lt;div&gt; class="input-demo-div"&gt;
    &lt;input class="ld-input" type="password" placeholder="请在此输入" width="400px"&gt;
&lt;/div&gt;
&lt;div&gt; class="input-demo-div"&gt;
    &lt;input class="ld-input" type="textarea" placeholder="请在此输入" width="100%"&gt;
&lt;/div&gt;</span></pre>
                            </div>
                        </div>

                    </div>
                    <!-- select 下拉选 -->
                    <div class="module select">
                        <h2>select 下拉选</h2>
                        <p class="description">
                            当选项过多时，使用下拉菜单展示并选择内容。
                        </p>
                        <div class="demonstration">
                            <h3>基础用法</h3>
                            <p class="description">
                                适用广泛的基础单选。
                            </p>
                            <select class="ld-select place" placeholder="请选择" value="shanghai" label="上海">
                                <option value="beijing" label="北京"></option>
                                <option value="shanghai" label="上海"></option>
                                <option value="shenzhen" label="深圳"></option>
                                <option value="guangzhou" label="广州"></option>
                                <option value="chongqing" label="重庆"></option>
                            </select>
                            <button class="select-getValue ld-primary">获取</button>
                            <div class="code">
                                <pre><span>&lt;select class="ld-select place" placeholder="请选择" value="shanghai" label="上海"&gt;
    &lt;option value="beijing" label="北京"&gt;&lt;/option&gt;
    &lt;option value="shanghai" label="上海"&gt;&lt;/option&gt;
    &lt;option value="shenzhen" label="深圳"&gt;&lt;/option&gt;
    &lt;option value="guangzhou" label="广州"&gt;&lt;/option&gt;
    &lt;option value="chongqing" label="重庆"&gt;&lt;/option&gt;
&lt;/select&gt;</span></pre>
                            </div>
                            <div class="code">
                                <pre><span>$(".select-getValue").click(function () {
    ldmessage.success("选中的label：" + $(".place>input").val() + "，选中的value：" + $(".place>input").attr("code"))
})</span></pre>
                            </div>
                            <p class="description">通常会为select指定一个<span class="code-tap">class</span>
                                属性，获取选中的值通过找其里面的<span class="code-tap">input</span>获得。</p>
                            <h3>有禁用选项</h3>
                            <select class="ld-select address" placeholder="请选择" value="shanghai" label="上海">
                                <option value="beijing" label="北京"></option>
                                <option value="shanghai" label="上海"></option>
                                <option disabled value="shenzhen" label="深圳"></option>
                                <option value="guangzhou" label="广州"></option>
                                <option value="chongqing" label="重庆"></option>
                            </select>
                            <div class="code">
                                <pre><span>&lt;select class="ld-select address" placeholder="请选择" value="shanghai" label="上海"&gt;
    &lt;option value="beijing" label="北京"&gt;&lt;/option&gt;
    &lt;option value="shanghai" label="上海"&gt;&lt;/option&gt;
    &lt;option disabled value="shenzhen" label="深圳"&gt;&lt;/option&gt;
    &lt;option value="guangzhou" label="广州"&gt;&lt;/option&gt;
    &lt;option value="chongqing" label="重庆"&gt;&lt;/option&gt;
&lt;/select&gt;</span></pre>
                            </div>
                            <p class="description">对禁用的<span class="code-tap">option</span>添加<span
                                    class="code-tap">disabled</span>属性</p>
                            <h3>禁用</h3>
                            <select disabled class="ld-select city" placeholder="请选择" value="shanghai" label="上海">
                                <option value="beijing" label="北京"></option>
                                <option value="shanghai" label="上海"></option>
                                <option value="shenzhen" label="深圳"></option>
                                <option value="guangzhou" label="广州"></option>
                                <option value="chongqing" label="重庆"></option>
                            </select>
                            <div class="code">
                                <pre><span>&lt;select disabled class="ld-select city" placeholder="请选择" value="shanghai" label="上海"&gt;
    &lt;option value="beijing" label="北京"&gt;&lt;/option&gt;
    &lt;option value="shanghai" label="上海"&gt;&lt;/option&gt;
    &lt;option value="shenzhen" label="深圳"&gt;&lt;/option&gt;
    &lt;option value="guangzhou" label="广州"&gt;&lt;/option&gt;
    &lt;option value="chongqing" label="重庆"&gt;&lt;/option&gt;
&lt;/select&gt;</span></pre>
                            </div>
                            <p class="description">为<span class="code-tap">select</span>标签添加 <span
                                    class="code-tap">disabled</span>属性</p>
                        </div>

                    </div>
                    <!-- message 消息提示 -->
                    <div class="module message">
                        <h2>message 消息提示</h2>
                        <p class="description">
                            常用于主动操作后的反馈提示。
                        </p>
                        <div class="demonstration">
                            <h3>基础用法</h3>
                            <p class="description">
                                从顶部出现，3 秒后自动消失。
                            </p>
                            <button class="ld-success">成功</button>
                            <div class="code">
                                <pre><span>$(".ld-success").click(function () {
    ldmessage.success("我点击了成功按钮！")
})</span></pre>
                            </div>
                            <button class="ld-warning">警告</button>
                            <div class="code">
                                <pre><span>$(".ld-warning").click(function () {
    ldmessage.alert("我点击了警告按钮！")
})</span></pre>
                            </div>
                            <button class="ld-danger">错误</button>
                            <div class="code">
                                <pre><span>$(".ld-danger").click(function () {
    ldmessage.error("我点击了错误按钮！")
})</span></pre>
                            </div>
                            <h3>消息确认</h3>
                            <p class="description">提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。</p>
                            <button class="ld-primary confirm">点击弹出消息确认对话框</button>
                            <div class="code">
                                <pre><span>$(".message .confirm").click(function () {
    ldConfirm.show({
        title: "提示文字",
        content: "您确定要删除选中项？"
    })
})
ldConfirm.catch = function () {
    ldmessage.alert("我点击了取消")
}
ldConfirm.then = function () {
    ldmessage.success("我点击了确定")
}</span></pre>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="../rieterJS/dist/js/rieter.js"></script>
    <script src="./js/font.js"></script>
    <script src="./js/zUI.js"></script>
    <script src="./js/doc.js"></script>
</body>

</html>